<template>
  <div class="app-container">
    <el-button @click="handleClick">播放</el-button>
    <audio ref="audio" loop src="https://music.163.com/song/media/outer/url?id=5212456.mp3" @timeupdate="updateTime" />
    <el-progress :percentage="times " />
    <ul>
      <li v-for="item in sheetList" :key="item.id">
        <el-image
          style="width: 100px; height: 100px"
          :src="item.picUrl"
          fit="fill"
        />
        <div class="count">{{ $utils.transNum(item.playCount,0) }}</div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  components: {},
  props: {
    sheetList: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      ifPlay: false,
      times: 0,
      timer: null
    }
  },
  watch: {
    ifPlay: {
      handler(val) {
        const audio = this.$refs.audio
        if (val) {
          audio.play()
          this.timer = setInterval(() => {
            this.times++
          }, 1000)
        } else {
          audio.pause()
          window.clearInterval(this.timer)
        }
      },
      immediate: true
    }
  },
  created() {},
  mounted() {},
  methods: {
    handleClick() {
      this.ifPlay = !this.ifPlay
      console.log(this.$refs.audio.currentTime, this.$refs.audio.duration, '属性')
    },
    updateTime(e) {
      console.log(e)
      this.times = e.target.currentTime
    }
  }

}
</script>
<style lang='scss' scoped>
.app-container {}
</style>
